<%@ page import="com.macrosolution.exdebito.Message" %>
<%! import grails.converters.JSON %>
<!DOCTYPE html>
<html>

<head>
	<meta name="layout" content="kickstart" />
	
	<title><g:message code="Calendario Messaggi" /></title>
	
	<script src="${resource(dir: 'site/js/plugin/fullcalendar', file: 'jquery.fullcalendar.min.js')}"></script>	
<%--	<script src="${resource(dir: 'site/js', file: 'moment.min.js')}"></script>--%>
<%--	<script src="${resource(dir: 'site/js/plugin/fullcalendar/lang', file: 'it.js')}"></script>	--%>
	<script type="text/javascript">
	var d = new Date();
	
		
	
		$(document).ready(function() {
					
			var calendar = $('#calendar').fullCalendar({

				header: { center: 'month,agendaWeek,agendaDay' },
				views: {
			        month: { // name of view
			            titleFormat: 'YYYY, MM, DD'
			            // other view-specific options here
			        }
			    },

				 
				 eventSources: [

				                // your event source
				                {
				                    url: '/message/renderJsonMessage',
				                    type: 'POST',
				                    data: {

				                    },
				                    error: function() {
				                        alert('Non riusciamo a recuperare i suoi messaggi,riprovare più tardi!');
				                    }
				                    
				                }
				            ],

				            loading: function(bool) {
				                if (bool) $('#pageLoader').fadeIn();
				                else $('#pageLoader').fadeOut();
				            },

					eventClick: function(callEvent	, jsEvent, view) {
						
<%--						window.location.href = '/message/show?id='+callEvent.id;--%>
				       
				        $(this).css('background-color', 'red');

				        ${remoteFunction(
							controller:'message',
							action:'messageDetail',
							params: '\'id=\'+callEvent.id',
							update:'body_message_detail',
							onFailure:'detail_loader(false)',
							onComplete:'detail_loader(false)',
							onLoading:'detail_loader(true)'
							
							
							)}
		
				    },

				  

				});

			
			
			 var hdr = {
			        left: 'title',
			        center: 'month,agendaWeek,agendaDay',
			        right: 'prev,today,next'
			    };


			 
			
		});

		function detail_loader(status){
			
			if(status){
				$('#detailLoader').fadeIn();
				
			}else{
				$('#detailLoader').fadeOut();			

			}

		}
		
		function successAddEvent(data,txs){

			$.smallBox({
				title : data,
				color : "#3F8DBF",
				sound:false,
				timeout: 3000
			});
			
			$('#calendar').fullCalendar( 'refetchEvents' );
			$('#add_message').modal('hide');
		}

		function successDeleteEvent(data,txs){

			$.smallBox({
				title : data,
				color : "#3F8DBF",
				sound:false,
				timeout: 3000
			});
			$('#calendar').fullCalendar( 'refetchEvents' );
			$('#message_detail').empty();
			
		}
		function failureAddEvent(a,b,c){

			$.smallBox({
				title : a.responseText,
				color : "#c26565",
				sound:false,
				timeout: 3000
			});
			
			
		}
		function failureDeleteEvent(a,b,c){

			$.smallBox({
				title : a.responseText,
				color : "#c26565",
				sound:false,
				timeout: 3000
			});
			
			
		}

		function loadButt(id,status){
			if(status==true){

				$('#'+id).button('loading');
				
			}else{

				$('#'+id).button('reset');

			}


		}
		
	
		</script>
	
</head>

<body>
<div id="ribbon">

				<!-- breadcrumb -->
				<ol class="breadcrumb">
					<li>Home</li><li>Message</li><li>Calendario Eventi</li>
				</ol>
				

			</div>
<div id="content">
	
	<div class="row">
		<div class="col col-md-7">
			
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_message">
  					Crea Evento
			</button>
			
		</div>
				
		
		
		<div 	 class="col col-md-3 col-md-offst-1" style="display:none">
		
			
		
		</div>
	
	
	</div>

<br><br>

<div class="row">
	
		<div class="col col-md-9">
				
						<!-- new widget -->
						<div class="jarviswidget jarviswidget-color-blueDark">
				
							
							<header>
								<span class="widget-icon"> <i class="fa fa-calendar"></i> </span>
								<span class="jarviswidget-loader" id="jw" ><i class="fa fa-refresh fa-spin"></i></span>
								<h2> My Events </h2>
								<div class="widget-toolbar">
									<!-- add: non-hidden - to disable auto hide -->
<%--									<div class="btn-group">--%>
<%--										<button class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown">--%>
<%--											Showing <i class="fa fa-caret-down"></i>--%>
<%--										</button>--%>
<%--										<ul class="dropdown-menu js-status-update pull-right">--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="mt">Month</a>--%>
<%--											</li>--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="ag">Agenda</a>--%>
<%--											</li>--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="td">Today</a>--%>
<%--											</li>--%>
<%--										</ul>--%>
<%--									</div>--%>
										<i id="pageLoader" style="display:none" class="fa fa-gear fa-2x fa-spin"></i>
								</div>
								
							</header>
				
							<!-- widget div-->
							<div>
				
								<div class="widget-body no-padding">
									<!-- content goes here -->
									<div class="widget-body-toolbar">
				
										
									</div>
									<div id="calendar"></div>
				
									<!-- end content -->
								</div>
				
							</div>
							<!-- end widget div -->
						</div>
						<!-- end widget -->
				
					</div>
					
					
					
					<%--inizion widget sx--%>
<div class="col-sm-12 col-md-3">
		<!-- new widget -->
		<div class="jarviswidget jarviswidget-color-blueDark">
			<header>
				<h2> Evento </h2>
				<div class="widget-toolbar">
									<!-- add: non-hidden - to disable auto hide -->
<%--									<div class="btn-group">--%>
<%--										<button class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown">--%>
<%--											Showing <i class="fa fa-caret-down"></i>--%>
<%--										</button>--%>
<%--										<ul class="dropdown-menu js-status-update pull-right">--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="mt">Month</a>--%>
<%--											</li>--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="ag">Agenda</a>--%>
<%--											</li>--%>
<%--											<li>--%>
<%--												<a href="javascript:void(0);" id="td">Today</a>--%>
<%--											</li>--%>
<%--										</ul>--%>
<%--									</div>--%>
										<i id="detailLoader" style="display:none" class="fa fa-gear fa-2x fa-spin"></i>
								</div>
			</header>

			<!-- widget div-->
			<div>

				<div class="widget-body" id = "body_message_detail">
					<!-- content goes here -->

						
					

					<!-- end content -->
				</div>

			</div>
			<!-- end widget div -->
		</div>
		<!-- end widget -->
</div>
<%--fine widget sx--%>
				
				</div>
				


</div>

<g:render template="addMessagePuP" ></g:render>

</body>


</html>